仪表盘 Sample详情

最后更新时间：2019年6月17日

仪表盘，显示类似于拨号/速度计上的读数的数据，是一种拟物化的展示形式。仪表盘的颜色可以用来划分指示值的类别，使用刻度标识数据，指针指示维度，指针角度表示数值。常用来反映完成率、增长率等比率性指标。具体实现方法如下：

1

构造ChartView

与折线图实现方法一样，在xml布局中添加ChartView控件，在此不赘述。

2

获取待统计的数据

根据实际需求选择合适的数据来源，可参考折线图此部分实现方法。

3

构造统计图表对象

//创建仪表盘
GaugeSeries gaugeSeries = new GaugeSeries();

//创建仪表盘数据
GaugeData gaugeData = new GaugeData();
//设置仪表盘数据value值
DecimalFormat df = new DecimalFormat(".00");
Double gaugePer = Double.parseDouble(df.format((double)(peopleNumber2017-peopleNumber2013)/peopleNumber2013*100));
gaugeData.setValue(gaugePer);
//设置仪表盘标题
gaugeData.setName("增长率");
//设置仪表盘数据
gaugeSeries.setGaugeData(gaugeData);
//设置仪表盘开始角度、结束角度、是否开启动画
gaugeSeries.setEndAngle(-40).setStartAngle(220).setAnimationEnable(true);
//设置仪表盘的半径(单位像素)、指针样式
gaugeSeries.setRadius(100f).setPointer(new Pointer().setWidth(3));

// 设置仪表盘详情
Detail detail=new Detail();
detail.setBorderColor(Color.TRANSPARENT);
detail.setBackgroundColor(Color.argb(2, 117, 148, 169));
detail.setHeight(35);
detail.setTextStyle(new TextStyle().setColor(Color.WHITE).setColor(Color.WHITE).setFontSize(16));
gaugeSeries.setDetail(detail);

4

配置图表各项参数

设置各项参数后即可显示仪表盘。

• 创建配置参数

Option mOption = new Option();

• 设置标题及标题样式

Title title=new Title();
title.setText("武汉市2017年较2010年人口增长率（单位：%）_仪表盘");
title.setAlignType(AlignType.center);
TextStyle textStyle=new TextStyle();
textStyle.setFontSize(14);
textStyle.setColor(Color.argb(1, 47, 69, 84));
title.setTextStyle(textStyle);
mOption.setTitle(title);

• 设置提示框及触发类型

Tooltip tooltip=new Tooltip();
tooltip.setTrigger(TriggerType.item);
mOption.setTooltip(tooltip);

• 设置图表数据

mOption.setSeries(gaugeSeries);

• 设置配置参数

mChartView.setOption(mOption);

显示效果如下图所示：